export function packageApi(data) {
  let api = `import request from "@/utils/request";

// 分页查询项目
export function retrieveReq(params) {
  return request({
    url: \`${data.retrieveReq}\`,
    method: "GET",
    params: params
  });
}

// 新增项目
export function createReq(data) {
  return request({
    url: \`${data.createReq}\`,
    method: "POST",
    data
  });
}

// 修改项目
export function updateReq(data) {
  return request({
    url: \`${data.updateReq}\`,
    method: "PUT",
    data
  });
}

// 删除项目
export function deleteReq(projectId) {
  return request({
    url: \`${data.deleteReq}\`,
    method: "DELETE"
  });
}

// 删除项目
export function deleteBatchReq(data) {
  return request({
    url: \`${data.deleteBatchReq}\`,
    method: "DELETE",
    data
  });
}

// 根据项目id查询详情
export function detailReq(data) {
  return request({
    url: \`${data.detailReq}\$\{data\}\`,
    method: "GET"
  });
}
`
  return api
}
export function exportData(name, data, suffix) {
  var fileName = name.concat(suffix)
  var content = 'data:text/csv;charset=utf-8,'
  content += data
  var encodedUri = encodeURI(content)
  var actions = document.createElement('a')
  actions.setAttribute('href', encodedUri)
  actions.setAttribute('download', fileName)
  actions.click()
}

export function packageFormJs(config, form) {
  let formJson = {
    fields: {},
    validators: {},
    config: {}
  }
  let formArr = JSON.parse(JSON.stringify(form))
  formArr.forEach(element => {

    formJson.fields[element.model] = {
      ...element
    }
  })
  config.forEach(element => {
    if (
      (element.mark == 1 && element.status) ||
      (element.mark == 2 && element.status) ||
      (element.mark == 3 && element.status)
    ) {
      formJson.config[element.value] = {
        fieldKeys: {},
        customize: {
          labelCol: {
            span: element.labelCol
          },
          wrapperCol: {
            span: element.wrapperCol
          }
        }
      }
      element.checkboxData.forEach(e => {
        if (e.checkbox) {
          formJson.config[element.value].fieldKeys[e.value] = {}
          if (e.disabled) {
            formJson.config[element.value].fieldKeys[e.value].disabled = e.disabled
          }
        }
      })
      if (element.mark == 3) {
        formJson.config[element.value].customize.layout = 'inline'
      }
    }

    if (element.mark == 4 && element.status) {
      formJson.config[element.value] = {
        fields: [],
        customize: {
          rowKey: "id",
          labelCol: {
            span: element.labelCol
          },
          wrapperCol: {
            span: element.wrapperCol
          }
        },
        extend: {
          batch: element.batch,
          action: {
            width: 110
          }
        }
      }
      element.checkboxData.forEach(e => {
        if (e.checkbox) {
          formJson.config[element.value].fields.push({
            model: e.value,
            title: e.label
          })
        }
      })
    }
  })

  formJson = 'export default ' + JSON.stringify(formJson, null, '\t')

  return formJson
}

export function packageVue(config) {
  let create = {}
  let update = {}
  let search = {}
  let table = {}

  config.forEach(element => {
    if (element.mark === 1) {
      create = element
    }
    if (element.mark === 2) {
      update = element
    }
    if (element.mark === 3) {
      search = element
    }
    if (element.mark === 4) {
      table = element
    }
  })

  let vue = `<template>
  <div class="xq-form-wrapper">
  `
  if (search.status) {
    vue += `
    <!-------------------------------------------- 搜索区域start -------------------------------------------->
    <div class="xq-form-search">
      <XqFormBuild
        ref="searchForm"
        mode="search"
        :dataSource="{}"
        :dynamicData="dynamicData"
        :formFields="FormJson['fields']"
        :formValidators="FormJson['validators']"
        :formConfig="FormJson['config']['search']"
      />
      <div style="text-align: right">
        <a-space>
          <a-button type="primary" @click="filterRecord">搜索</a-button>
          <a-button type="default" @click="resetRecord">重置</a-button>
        </a-space>
      </div>
    </div>
    <!-------------------------------------------- 搜索区域end -------------------------------------------->
    `
  }
  vue += `
  <!-------------------------------------------- 删除添加按钮区域start -------------------------------------------->
  <div class="xq-form-action">
    <a-space class="xq-form-action-left">
      <a-button type="primary" @click="showCreateModal">添加</a-button>
      <a-button :disabled="selectedRowKeys.length <= 0" type="primary" @click="deleteBatchRecord"
        >批量删除</a-button
      >
    </a-space>
  </div>
  <!-------------------------------------------- 删除添加按钮区域end -------------------------------------------->
  `
  if (table.status) {
    vue += `
    <!-------------------------------------------- 表格区域区域start -------------------------------------------->
    <a-spin :spinning="spinning" class="xq-form-content">
      <XqTable
        :pagination="false"
        :scroll="{ x: columns.length * 150 }"
        :customize="FormJson['config']['table']['customize']"
        :dataSource="tableData"
        :columns="columns"
        :rowSelection="
          FormJson['config']['table']['extend']['batch']
            ? {
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange
              }
            : null
        "
        class="xq-form-content-table"
      >
        <!--------------------------------------------主要内容，表格，自定义 header -------------------------------------------->
        <template v-for="(col, index) in columns" #[\`xq_\${col.dataIndex}\`]>
          <span :key="index">
            {{ col.customTitle }}
          </span>
        </template>
        <!-------------------------------------------- 主要内容，表格，自定义 td -------------------------------------------->
        <template v-for="(col, index) in columns" #[col.dataIndex]="text, record">
          <!-------------------------------------------- 主操作列区域start -------------------------------------------->
          <span v-if="col.dataIndex === 'tableAction'" :key="index">
            <a @click="showUpdateModal(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              :title="\`确认要删除记录吗？\`"
              okText="确认"
              cancelText="取消"
              @confirm="deleteRecord(record)"
            >
              <a>删除</a>
            </a-popconfirm>
          </span>
          <!-------------------------------------------- 主操作列区域end -------------------------------------------->
          <!-------------------------------------------- 枚举值转换start -------------------------------------------->
          <XqTableCell
            v-else
            :key="index"
            :record="record"
            :field="FormJson['fields'][col.dataIndex]"
            :dynamicData="dynamicData"
          />
          <!-------------------------------------------- 枚举值转换end -------------------------------------------->
        </template>
      </XqTable>
      <!-------------------------------------------- 分页区域start -------------------------------------------->
      <div class="xq-form-content-pagination">
        <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
        <a-pagination
          v-model="currentPage"
          :pageSize="pageSize"
          :total="total"
          :showSizeChanger="true"
          :showQuickJumper="true"
          :pageSizeOptions="['20', '50', '100']"
          @change="onPageChange"
          @showSizeChange="onPageSizeChange"
        />
      </div>
      <!-------------------------------------------- 分页区域区域end -------------------------------------------->
    </a-spin>
    <!-------------------------------------------- 表格区域end -------------------------------------------->
    `
  }
  if (create.status) {
    vue += `
<!-------------------------------------------- 添加对话框区域start -------------------------------------------->
<a-modal
  v-model="createModalVisible"
  :maskClosable="false"
  :destroyOnClose="true"
  title="添加"
  :width="500"
>
  <XqFormBuild
    ref="createForm"
    :dataSource="{}"
    :dynamicData="dynamicData"
    :formFields="FormJson['fields']"
    :formValidators="FormJson['validators']"
    :formConfig="FormJson['config']['create']"
  />
  <XqModalFooter slot="footer" @cancel="createCancel" @ok="createOk" />
</a-modal>
<!-------------------------------------------- 添加对话框区域end --------------------------------------------> 
    `
  }
  if (update.status) {
    vue += `
    <!-------------------------------------------- 编辑对话框区域start -------------------------------------------->
    <a-modal
      v-model="updateModalVisible"
      :maskClosable="false"
      :destroyOnClose="true"
      title="编辑"
      :width="500"
    >
      <XqFormBuild
        ref="updateForm"
        :dataSource="tempRecord"
        :dynamicData="dynamicData"
        :formFields="FormJson['fields']"
        :formValidators="FormJson['validators']"
        :formConfig="FormJson['config']['update']"
      />
      <XqModalFooter slot="footer" @cancel="updateCancel" @ok="updateOk" />
    </a-modal>
    <!-------------------------------------------- 编辑对话框区域end -------------------------------------------->
    `
  }
  vue += `
  </div>
  </template>
  <script>
  import FormJson from "./FormJson"; // 引入FormJson数据
  import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
  import { retrieveReq, createReq, deleteReq, deleteBatchReq, updateReq } from "./api"; // 引入接口文件
  
  const curdMixin = new XqCurdMixin({
    createReq,
    retrieveReq,
    updateReq,
    deleteReq,
    deleteBatchReq,
    FormJson,
    tableConfigKey: "table"
  });
  
  export default {
    name: "",
    components: {},
    mixins: [curdMixin],
    data() {
      return {
        pageSize: 20
      };
    },
    computed: {
      retrieveParams() {
        return {
          request: {}
        };
      },
      createParams() {
        return {};
      },
      updateParams() {
        return {};
      }
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
      formatValues(values) {
        return values;
      },
      formatDataSource(record) {
        return record;
      }
    }
  };
  </script>
  
  `
  return vue
}